<template>
    <div class="btnType">
        <el-button @click="dialogVisible = true">筛选批次</el-button>
        <el-dialog title="筛选批次" :visible.sync="dialogVisible" width="60%" append-to-body :before-close="handleClose">
            <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="养殖设施">
                    <el-select v-model="ruleForm.item2" class="w100p" multiple clearable filterable placeholder="请选择养殖设施">
                        <el-option label="17#塘" value="17#塘"></el-option>
                        <el-option label="18#塘" value="18#塘"></el-option>
                        <el-option label="19#塘" value="19#塘"></el-option>
                        <el-option label="20#塘" value="20#塘"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="养殖批次">
                    <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox> -->
                    <!-- <div style="margin: 15px 0;"></div> -->
                    <el-checkbox-group v-model="checkedbatchs" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="city in batchList" :label="city" :key="city">{{ city }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="已经批次">
                    <el-tag class="tag" size="small" v-for="tagName, index in checkedbatchs" :key="index"
                        effect="plain">{{ tagName }}</el-tag>
                    <span v-show="checkedbatchs.length==0" class="noData">请选择批次！</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
   
<script>
const batchOptions = ['批次1', '批次2', '批次3', '批次4'];
export default {
    components: {},
    name:'screenBatch',
    data() {
        return {
            ruleForm: {},
            dialogVisible: false,
            checkAll: false,
            checkedbatchs: ['批次1', '批次2'],
            batchList: batchOptions,
            isIndeterminate: true
        }
    },
    
    watch: {},
    mounted() {

    },
    methods: {
        // handleCheckAllChange(val) {
        //     this.checkedbatchs = val ? batchOptions : [];
        //     this.isIndeterminate = false;
        // },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.batchList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.batchList.length;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
</script>
   
<style scoped>
.tag {
    margin-right: 10px;
    cursor: pointer;
}
.btnType{
    display: inline-block;
}
</style>